<!-- 企业信息审核 -->
<template>
  <div class="organizational-inquiry">
    <Row>
      <Col span="5" class="tree-box">
        <Input class="mb-10" search placeholder="请输入关键词" v-model="keywords" @on-change="onSearchTree" />
        <Tree
          expand
          :data="treeData"
          :render="renderContent"
          children-key="childrenCompanyList"
          @on-select-change="onSelectTree"
        ></Tree>
      </Col>
      <Col span="19" class="table-box">
        <ProjectInquiry ref="projectInquiry" />
      </Col>
    </Row>
  </div>
</template>

<script>
import { debounce, cloneDeep } from 'lodash';
import ProjectInquiry from './projectInquiry.vue'
import { getOrgTree } from '@/api/organizationManage.js'

export default {
  name: 'organizationalInquiry',
  components: { ProjectInquiry },
  data () {
    return {
      keywords: '',
      treeData: [],
      treeDataCopy: [],
    };
  },
  async created () {
    const res = await getOrgTree({ companyId: 'g', isShowCompanyDepartment: false, isIncludeOneself: true, isInclusionChildren: true })
    this.treeDataCopy = this.getTreeData(res)
    this.treeData = cloneDeep(this.treeDataCopy)
  },
  methods: {
    renderContent (h, { root, node, data }) {
      return h('span', data.companyName)
    },
    onSelectTree (arr, item) {
      this.$refs.projectInquiry.init(item.companyId)
    },
    // 左侧树形图搜索框
    onSearchTree: debounce(function () {
      const arr = cloneDeep(this.treeDataCopy)
      this.treeData = this.getSearchTreeData(arr)
    }, 500),
    // 递归关键字查询
    getSearchTreeData (arr) {
      return arr.filter(it => {
        if (it.childrenCompanyList && it.childrenCompanyList.length) {
          it.childrenCompanyList = this.getSearchTreeData(it.childrenCompanyList)
          return it.companyName.includes(this.keywords) || it.childrenCompanyList.length
        }
        return it.companyName.includes(this.keywords)
      })
    },
    // 递归添加展开
    getTreeData (arr) {
      return arr.map(it => {
        if (it.childrenCompanyList && it.childrenCompanyList.length) {
          it.childrenCompanyList = this.getTreeData(it.childrenCompanyList)
        }
        it.expand = true
        return it
      })
    }
  }
};
</script>

<style lang="less" scoped>
.organizational-inquiry {
  margin-top: -16px;
}
.tree-box {
  padding: 20px 20px 0 0;
  border-right: 1px solid #eee;
}
.table-box {
  padding: 20px 0 0 20px;
}

.mb-10 {
  margin-bottom: 10px;
}
</style>
